<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="breadcrumb" style="margin: 20px">
    <span class="layui-breadcrumb">
        <a href="/admin">首页</a>
        <a><cite>文章编辑</cite></a>
    </span>
</div>

<table class="layui-hide" id="test"></table>

<script src="/static/pear/component/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('table', function() {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/api/v1/admin/article/'
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: "首页" //不显示首页
                , last: '尾页', //不显示尾页
            }
            , cols: [
                [
                    {field: 'id', title: 'ID', width: 80}
                    , {field: 'title', title: '标题'}
                    , {field: 'create_time', title: '发布时间', width: 200}
                    ,
                    {
                        field: 'status',
                        title: '状态',
                        width: 120,
                        templet: (d) => {
                            if (d.status === 0) {
                                return `<span style="color: green">审核通过</span>`;
                            } else if (d.status === -1) {
                                return `<span style="color: red">审核失败</span>`;
                            }else{
                                return `<span style="color: yellow">正在审核</span>`
                            }
                        },
                    }
                    ,
                    {
                        title: '操作管理',
                        width: 150,
                        templet: (d) => `
                            <button type="button" class="layui-btn layui-btn-xs ">
                                <a style="color: white" href="/admin/articles_verify?article_id=${d.id}">审核</a>
                            </button>
                            <button type="button" class="layui-btn layui-btn-xs">
                                <a style="color: white" href="/admin/article_edit">编辑</a>
                            </button>`,
                    },
                ]],
        });
    });
</script>

</body>
</html>
